.article-container {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}

.article {
  &__author-wrap {
    margin-bottom: .75rem;
    color: #808080;
  }

  &__meta-wrap {
    margin: 1.1rem 0;
  }

  &__meta {
    color: #808080;
    > span {
      display: inline-block;
      margin-right: .75rem;
    }
  }

  &__reply-time {
    float: none;
    &:before {
      content: '\00B7';
      margin: 0 .25rem;
    }
  }

  &__author {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }

    .avatar--s {
      margin-right: .6rem;
    }
  }

  &__btn-wrap {
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;

    > span {
      display: block;
      cursor: pointer;
    }
  }

  &__edit-btn {
    width: 2.5rem;
    height: 2.5rem;
    color: #aab8c2;
    border-radius: 50%;
    transition: background ease-out 0.2s;
    > i {
      margin-top: .6rem;
      margin-left: .65rem;
    }

    &:hover {
      background: rgba(0,0,0,.1);
    }
  }

  &__like-btn {
    width: 5rem;
    height: 5rem;
    background-repeat: no-repeat;
    background-image: url(~src/assets/img/heart.png);
    background-position: 0 0;
    cursor: pointer;

    &:hover,
    &.is-active {
      background-position: right;
    }

    &.animating {
      animation: fave-heart 1s steps(28);
    }
  }
}

@keyframes fave-heart {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2800px 0;
  }
}
